<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery/jquery3.1.1.js"></script>
    <!-- 引入bootstrap，需要两个，分别是：css，js（js引入的时候先引入jquery） -->
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
</head>
<style>
    /* 修改容器样式 */
    .main-container {
        margin-top: 80px;
        padding: 0 !important; /* 清除容器内边距 */
    }

    /* 调整行边距 */
    .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* 修改左侧列样式 */
    .left-panel {
        background: #f8f9fa;
        min-height: calc(100vh - 100px);
        padding: 20px;
        border-right: 1px solid #dee2e6;
        /* 新增以下两行 */
        margin-left: 0;
        padding-left: 0; /* 移除左侧内边距 */
    }

    /* 调整右侧列内边距 */
    .right-panel {
        padding: 20px;
        /* 新增以下两行 */
        margin-right: 0;
        padding-right: 0;
    }

    /* 修复栅格系统默认边距 */
    .col-md-3, .col-md-9 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
</style>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">学习商城</a>
        </div>


        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">

                <li><a href="">免费注册</a></li>
                <!--
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
                -->
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入关键字搜索">
                </div>
                <button type="button" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">购物车<span id="cart-count" class="cart-count">0</span></a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">个人中心</a></li>
                <li><a onclick="backstage()">商家服务</a></li>
                <li><a onclick="lingout()">退出登录</a></li>

            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="container">
    <div class="row">

        <div class="col-md-3 left-panel">
            <h4>用户中心</h4>
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">个人资料</a></li>
                <li><a href="#">账户安全</a></li>
                <li><a href="#">消息通知</a></li>
                <li><a href="#">帮助中心</a></li>
            </ul>
        </div>

        <div class="col-md-9 right-panel">
<form class="form-horizontal" style="margin-top: 80px;">
    <div class="form-group">
        <label for="inputname" class="col-sm-2 control-label">姓名</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="inputname" placeholder="请输入姓名">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">邮箱</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="inputemail" placeholder="xxx@xxx.com">
        </div>
    </div>



    <div class="form-group">
        <label for="inputphone" class="col-sm-2 control-label">手机号</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="inputphone" placeholder="请输入手机号">
        </div>

    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">反馈详情</label>
        <div class="col-sm-6">
            <textarea id="inputmessage" cols="100" rows="8"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label for="file" class="col-sm-2 control-label">反馈图片</label>
        <div class="col-sm-6">
            <input type="file" class="form-control" id="file" onchange="uploadFile()">

            <img id="backimg" src="" style="width: 100px;">
        </div>

    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-default" onclick="save()">提交</button>
        </div>
    </div>




</form>
    </div>

</body>
</html>
<script>
    function uploadFile() {
        // 阻止表单提交
        event.preventDefault();
        const client = new OSS({
            region: "oss-cn-chengdu",
            accessKeyId:"LTAI5tL4BRZNoyYzeLcjnw6M",
            accessKeySecret:"omvAnQZTh535OL4VVLrvkWjtWFaYsa",
            bucket: "zzjhws",
        });

        const data = file.files[0];
        putObject(data);

        async function putObject(data) {
            try {
                const options = {
                    meta: { temp: "demo" },
                    mime: "json",
                    headers: { "Content-Type": "text/plain" },
                };
                let fileName = document.getElementById("file").value
                const result = await client.put(fileName, data, options);
                //console.log(result.url);
                document.getElementById("backimg").src = result.url
            } catch (e) {
                console.log(e);
            }
        }

    }

    function save() {
        //获取提交人姓名
        let name = document.getElementById("inputname").value;
        let email = document.getElementById("inputemail").value;
        let phone = document.getElementById("inputphone").value;
        let message = document.getElementById("inputmessage").value;
        let backimg = document.getElementById("backimg").src;
        console.log(name);
        console.log(email);
        console.log(phone);
        console.log(message);
        console.log(backimg);

        if(name==""||email==""||phone==""||message==""||backimg==""){
            alert("请填写完整信息");
        }
        else{

        $.ajax({
                    type: "POST",
                    url: "feedback/save",
                    dataType: "json",
                    contentType: "application/x-www-form-urlencoded",
                    data: {
                        "name": name,
                        "email": email,
                        "phone": phone,
                        "message": message,
                        "backimg": backimg
                    },
                    success: function (data) {
                        alert(data.data);

                    },

                });
         }

    }

</script>